<template>
  <footer class="footer-flex">
    <div class="footer-content-left">
      <div class="footer-content clickable" @click="goHome">
        Points Mall
      </div>
    </div>
    <div class="footer-content-left">
      <div class="footer-content clickable" @click="checkout">
        Checkout
      </div>
    </div>
    <div class="footer-content-right">
      <div class="footer-content clickable" @click="changeTheme">
        Change Theme
      </div>
    </div>
  </footer>
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: "MyFooter"
})
</script>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { useStore } from "../store/main"
const store = useStore()
const router = useRouter()
function changeTheme() {
  let classList = document.body.classList
  classList.toggle("old-theme")
  if (classList.contains("old-theme")) {
    let marqueeElement = document.createElement("marquee")
    marqueeElement.setAttribute("scrollDelay", "80")
    marqueeElement.innerHTML = "Welcome to the points mall!"
    document.body.insertBefore(marqueeElement, document.body.firstChild)
  } else {
    if (document.body.firstChild!.nodeName.toLowerCase() === "marquee") {
      document.body.removeChild(document.body.firstChild!)
    }
  }
}
async function checkout() {
  if (store.state.thingsBuy.length == 0) {
    return;
  }
  await router.push("/checkout")
}
async function goHome() {
  await router.push("/")
}
</script>
<style scoped lang="less">
@import "../vars";
.footer-flex {
  display: flex;
  padding: 0 1.25em;
  background: @gray-200;
}
.footer-content-right {
  margin-left: auto;
}
.footer-content-left, .footer-content-right {
  display: flex;
}
.footer-content {
  flex: auto;
  word-break: keep-all;
  word-wrap: normal;
  padding: 0.9em;
  color: @gray-500;
  font-size: 0.9em;
}
.clickable {
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
</style>